<template>
    <NCard title="代理返佣">
        <NForm :model="form" inline>
            <NFormItem label="开卡返佣" path="cardRate">
                <NInput v-model:value="form.cardRate" placeholder="请输入">
                    <template #suffix> % </template>
                </NInput>
            </NFormItem>
            <NFormItem label="兑换返佣" path="commissionRate">
                <NInput v-model:value="form.commissionRate" placeholder="请输入">
                    <template #suffix>%</template>
                </NInput>
            </NFormItem>
            <NFormItem>
                <NButton type="primary" @click="submit" :loading="loading">确定</NButton>
            </NFormItem>
        </NForm>
    </NCard>
</template>

<script lang="ts" setup>
import { ref, watchEffect } from 'vue'
import { updateAgencyrebateConfig } from '@/api/config'
import { useMessage, type FormRules } from 'naive-ui'

const { config } = defineProps<{
    config: Api.Config.AgencyrebateConfig | null
}>()

const message = useMessage()
const form = ref<Api.Config.AgencyrebateConfig>({
    cardRate: '',
    commissionRate: ''
})

watchEffect(() => {
    if (config) {
        form.value.cardRate = config.cardRate
        form.value.commissionRate = config.commissionRate
    }
})

const loading = ref(false)
async function submit() {
    loading.value = true
    const [err, res] = await updateAgencyrebateConfig(form.value)
    loading.value = false
    if (!err && res) {
        message.success('操作成功')
    }
}
</script>
